<template>
	<view class="sendPartyWp">
		<view class="tabsWp">
			<u-tabs :current="category" :list="tabList" :activeStyle="{color:'#276AEE',fontWeight: 600}"
				lineColor="#276AEE" lineWidth="48rpx" lineHeight="4rpx"
				:inactiveStyle="{color:'#1D2129',fontWeight: 600}" :itemStyle="{ height: '40px' }"
				@click="(e)=>handleTabItem(e.index)"></u-tabs>
		</view>
		<view v-for="(item,i) in partyHistoryList" :key="item.id">
			<partyItem :showLine="false" :showBtn="false" :showMark="true" :item="item" @handleItem='handleItem'
				@longPressItem="handleDel">
			</partyItem>
		</view>
		<nodata v-if="!partyHistoryList || partyHistoryList.length==0" nodataText="暂无历史组局"
			nodataImgUrl="https://file.casugn.com/storecompcard/temp/空页面@2x(14)_1681113729843.png">
		</nodata>
		<u-picker :show="switchShow" :columns="columns" keyName="label" @close="switchShow=false" closeOnClickOverlay
			@cancel="switchShow=false" @confirm="switchConfirm" :defaultIndex="[0]"></u-picker>
		<u-datetime-picker :show="showPicker" v-model="pickerTime" mode="year-month" closeOnClickOverlay
			@confirm="confirm" @cancel="closePicker" @change="changeHandler" @close="closePicker"></u-datetime-picker>
		<u-popup :show="delModel" @close="delModel=false">
			<view class="delModelWp">
				<view class="delWp">
					<view class="title">
						请选择操作
					</view>
					<view class="moreBtnWp">
						<view class="cancel" @click="handleDel">
							删除记录
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import nodata from '@/components/nodata/nodata.vue'
	import partyItem from '@/pagesParty/components/partyItem/partyItem.vue'
	export default {
		components: {
			partyItem,
			nodata
		},
		data() {
			return {
				partyHistoryList: [],
				showPicker: false,
				month: '',
				pickerTime: Number(new Date()),
				queryTime: null,
				//子组件传值 
				selectItem: null,
				//删除弹框
				delModel: false,
				status: '',
				partakeStatus: '', //參與狀態 0未处理，1已参加，2已拒绝
				switchShow: false, //
				columns: [
					[{
							label: '全部',
							id: ''
						},
						{
							label: '未处理',
							id: 0
						}, {
							label: '已同意',
							id: 1
						}, {
							label: '已拒绝',
							id: 2
						}
					]
				],
				switchValue: '全部',
				switchId: '',
				isShow: true,
				pageNo: 1,
				total: 0,
				pageSize: 10,
				category: 0, //0：全部，1：我发布 2：我参加
				tabList: [{
						name: '全部',
					},
					{
						name: '我发布的',
					},
					{
						name: '我参与的',
					},
				]

			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		created() {
			uni.showLoading({
				title: '加载中'
			})
			this.queryHistoryList()

		},
		onReachBottom() {
			if (this.total <= this.pageNo * this.pageSize) {
				uni.showToast({
					title: '没有更多数据',
					icon: 'none'
				})
				return
			} else {
				this.pageNo++
				this.queryHistoryList()
			}

		},
		//下拉刷新状态
		onPullDownRefresh() {
			this.partakeStatus = ''
			this.resetList()
		},
		methods: {
			handleTabItem(index) {
				this.category = index
				if (index == 2) {
					this.status = 1
				} else {
					this.status = ''
				}
				this.resetList()
			},
			resetList() {
				uni.showLoading({
					title: '加载中'
				})
				this.partyHistoryList = []
				this.total = 0
				this.pageNo = 1
				this.queryHistoryList()
			},
			// 狀態切換--我參與的才有
			switchClick() {
				console.log(1)
				this.switchShow = true
			},
			// 确定选择状态
			switchConfirm(val) {
				this.switchShow = false
				console.log(val.value[0])
				this.switchValue = val.value[0].label
				this.partakeStatus = val.value[0].id
				// 重置 
				this.resetList()
			},
			//获取当月时间
			nowTime() {
				let now = new Date();
				this.month = now.getMonth() + 1
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(now, 'yyyy-mm')
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
			},
			//选择时间
			chooseTime() {
				this.showPicker = true
			},
			closePicker() {
				this.showPicker = false
			},
			//时间选择改变
			changeHandler(e) {
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(e.value, 'yyyy-mm')
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
			},
			//点击列表项
			handleItem(item) {
				if (item.membersStatus == 2) return //已拒绝状态
				uni.navigateTo({
					url: `/pagesParty/party/partyHistory/partyHistoryInfo?id=${item.id}`
				})
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(e.value, 'yyyy-mm')
				let aa = str.split('-')[1].split("")
				console.log(aa)
				if (aa[0] == 0) {
					this.month = aa[1]
				} else {
					this.month = aa[0] + aa[1]
				}
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
				this.showPicker = false
				this.resetList()
			},
			// 查询历史列表信息
			async queryHistoryList() {
				let payload = {
					category: this.category,
					// date: this.queryTime,
					openId: this.userInfo.openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: this.status //0未处理，1已参加，2已拒绝
				}
				let res = await this.$api.queryPastGroupPage(payload)
				if (res.success && res.result.records.length > 0) {
					console.log(res.result.records);
					this.partyHistoryList = [...this.partyHistoryList, ...res.result.records]
					this.total = res.result.total
				} else {
					uni.showToast({
						title: '未查询到相应数据',
						icon: 'none'
					});
					this.partyHistoryList = []
					this.total = 0
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			showModel({
				item,
				index
			}) {
				this.selectItem = {
					item,
					index
				}
				this.delModel = true
			},
			handleDel(item) {
				console.log(item);
				uni.showModal({
					title: '是否删除?',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.deleteMyGroup(item.deleteId)
							if (res.success) {
								let index = this.partyHistoryList.findIndex(obj => {
									return obj.id == item.id
								})
								if (index != -1) {
									this.partyHistoryList.splice(index, 1)
								}
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sendPartyWp {
		padding-top: 1rpx;
		min-height: 100vh;
		background-color: #f7f8fa;

		.tabsWp {
			background-color: #fff;
			height: 80rpx;
		}

		.partyItemWp {
			margin: 30upx;
			padding-bottom: 30upx;
		}

		.delModelWp {
			// display: flex;
			// align-items: center;

			.delWp {
				border-top: 1upx solid #eee;

				.title {
					text-align: center;
					font-size: 26upx;
					font-weight: 400;
					color: #333333;
					padding: 30upx 0;
					border-bottom: 1upx solid #eee;
				}

				.moreBtnWp {
					height: 90upx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					border: none;
					box-shadow: none;

					.deltext {
						text-align: center;
						flex: 1;
						font-weight: 400;
						border-right: 1upx solid #eee;
						color: #333333;
						font-size: 24upx;
						font-weight: 400;
						color: #423CFE;
					}

					.cancel {
						text-align: center;
						flex: 1;
						font-size: 24upx;
						font-weight: 400;
						color: red;

					}
				}
			}
		}
	}
</style>